<template>
  <dialog-box
    :isDialog="false"
    ref="myDialog"
    :showFooter="true"
    width="800px"
    sureName="生成表"
    @close="close"
    @sureHandle="sureHandle"
    :isFooterSlot="true"
    title="历史脚本"
  >
    <template v-slot:dialogMain>
      <div class="sql-box">
        <t-table
          ref="selectionTable"
          :table="tableOption"
          :columns="tableOption.columns"
          @radioChange="radioChange"
          :rowClickRadio="false"
          :isShowPagination="false"
        />
      </div>
    </template>
  </dialog-box>
</template>

<script setup lang="ts">
import { onMounted, computed, reactive, toRefs, ref } from "vue";
import {
  type FormRules,
  ElMessage,
} from "element-plus";
// 类型
import type { HsaTableColumn } from "hsa-ui";
const myDialog = ref(null);
const ruleForm = ref({} as any);
const parentForm = ref({} as any);

const emit = defineEmits(["sureHandle", "sqlHandle"]);


let state = reactive({
});

// 表格配置
const tableOption = reactive({
  data: ref<any[]>([
    {
      date: "2016-05-02",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "端口",
    },
    {
      date: "2016-05-04",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "端口",
    },
    {
      date: "2016-05-01",
      name: "王小虎",
      state: "驱动类型",
      city: "192.168.168.222",
      zip: "端口",
    },
    {
      date: "2016-05-03",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "65535",
    },
  ]),
  firstColumn: [
    { type: "radio", fixed: true },
    { type: "index", label: "序号" }
  ],

  paginationEnable: false,
  columns: ref<HsaTableColumn[]>([
    { align: "center", label: "执行时间", prop: "date" },
    { align: "center", label: "脚本内容", prop: "name" }
  ]),
});
// 获取ref
const selectionTable: any = ref<HTMLElement | null>(null)
// 选择单选框
const radioChange = (val: any) => {
  ruleForm.value = Object.assign({}, { ...val })
}
// 定义完成后，用defineExpose()暴露给父组件
const open = (data: any) => {
  selectionTable.value?.clearRadioHandle()
  ruleForm.value = {}
  if (data) {
    parentForm.value = data;
  }
  myDialog.value.handleOpen();
};
const close = () => {
  emit("sqlHandle");
  // myDialog.value.handleClose();
};
const sureHandle = () => {
  // ElMessage({
  //   type: "success",
  //   message: "操作成功!",
  // });
  // let data = Object.assign({}, { ...ruleForm.value })
  let data = Object.assign({}, {
    ...parentForm.value,
    hisObj: {
      ...ruleForm.value
    }
   })
  emit("sqlHandle", data);
  // emit("sureHandle", Object.assign({}, { ...ruleForm.value }));
  // myDialog.value.handleClose();
  myDialog.value.handleClose();
};
defineExpose({
  open,
  close,
});

</script>

<style lang="scss" scoped>
.mb-10{
  margin-bottom: 10px;
}
.jut-end{
  display: flex;
  justify-content: flex-end;
}
.sql-box{
  width: 100%;
  margin-bottom: 20px;
}
</style>
